<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 HLS Player</title>
    <!-- 引入Vue3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- 引入hls.js -->
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
</head>
<body>
    <div id="app">
        <video ref="videoPlayer" controls></video>
    </div>
    <script>
        const { createApp, ref, onMounted } = Vue;
        const app = createApp({
            setup() {
                const videoPlayer = ref(null); // 用于引用video元素
                onMounted(() => {
                    // 确保video元素已经挂载
                    const video = videoPlayer.value;
                    let hls;
                    if (Hls.isSupported()) {
                        hls = new Hls();
                        hls.loadSource('https://open.ys7.com/v3/openlive/FX2632749_1_1.m3u8?expire=1813824835&id=861278662987468800&t=67ffb2fdf236fb7ea905c24983bd54695b644cbb14a396f66090dbd6140ba822&ev=100'); // 替换成你的m3u8地址
                        hls.attachMedia(video);
                        hls.on(Hls.Events.MANIFEST_PARSED, function() {
                            video.play();
                        });
                    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
                        // 对于原生支持HLS的浏览器（如Safari）
                        video.src = 'https://open.ys7.com/v3/openlive/FX2632749_1_1.m3u8?expire=1813824835&id=861278662987468800&t=67ffb2fdf236fb7ea905c24983bd54695b644cbb14a396f66090dbd6140ba822&ev=100'; // 替换成你的m3u8地址
                        video.addEventListener('loadedmetadata', function() {
                            video.play();
                        });
                    }
                });
                return {
                    videoPlayer
                };
            }
        });
        app.mount('#app');
    </script>
</body>
</html>